<template>
  <div>
    <a-drawer
      :class="className"
      :title="title"
      :width="width"
      :maskClosable="true"
      :destroyOnClose="false"
      placement="right"
      :closable="closable"
      wrapClassName="dwBox"
      @close="onClose"
      :visible="visible"
    >
      <slot></slot>
      <!-- <div v-if="footerShow" class="footer">
        <a-button class="close" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </div> -->
    </a-drawer>
  </div>
</template>
<script>
export default {
  name: "Drawer",
  props: {
    className: {
      type: String,
      default: '',
    },
    // 标题
    title: {
      type: String,
      // default: "标题"
    },
    // 宽度
    width: {
      type: Number,
      default: 640
    },
    footerShow: {
      type: Boolean,
      default: false
    },
    closable:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    show() {
      this.visible = true;
    },
    onClose() {
      // debugger
      this.visible = false;
      this.$emit("close");
    },
    onSubmit() {
      this.$emit("submit");
    }
  }
};
</script>
<style scoped lang="less">
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
  .close {
    margin-right: 8px;
  }
}
</style>
